<!DOCTYPE html>
<html lang="zh-CN">
   <head> 
   	 <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="font-awesome插件/css/font-awesome.min.css">
     <link rel="stylesheet" href='css/owl.carousel.css'>
     <link rel="stylesheet" href='css/owl.theme.css'>
     <link rel="stylesheet" href="css/style.min.css">
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      <title>bootstrapDemo</title>
   </head>
   <body>
      <header id="header">
      	<div class="container">
      		<div class="menu">
      			<span class='fa fa-reorder fa-2x'></span>
      			<ul>
      				<li>SERVICES</li>
      				<li>PRICING</li>
      				<li>PROJECTS</li>
      				<li>ABOUT</li>
      				<li>CONTACT</li>
      			</ul>
      		</div>
            <div class="header-info">
            	<h4>WE'VE GOT THE SPECIAL POWEL</h4>
            	<span></span>
            	<h1>Our business</h1>
            	<a href="#intro" class='scroll'>
            		<i class="fa fa-angle-down fa-2x" ></i>
            	</a>
            	
            </div>
                
      	</div>
      </header>
      
      <section id="intro">
      	<div class="container">
      	<h2>MEET US</h2>
      	<span></span>
      	<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
      	<a href="#service" class='scroll color-orange'>
            		<i class="fa fa-angle-down fa-2x" ></i>
            	</a>

      	</div> 	
      </section>

     <section id="check">
    	<div class="container">
    		<a href="#">CHECK OUR SHOPE</a>
    	</div>
    </section>

    <section id="service">
    	<div class="container">
    		<h2>SERVICE</h2>
    		<span></span>
    		<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>

    		<div>
    			<ul>
    				<li class="col-md-4">
    					<span></span>
    					<h5>BRANDING</h5>
    					<p>Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
    				</li>
    				<li class="col-md-4">
    					<span></span>
    					<h5>WEB DEVELOPMENT</h5>
    					<p>Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
    				</li>
    				<li class="col-md-4">
    					<span></span>
    					<h5>APP DESIGN</h5>
    					<p>Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
    				</li>
    			</ul>
    			<div class="clearfix"></div>	
    		</div>
    		<a href="#projects" class='scroll color-orange'>
            		<i class="fa fa-angle-down fa-2x" ></i>
            	</a>
    	</div>
    </section>

    <section id="check">
    	<div class="container">
    		<a href="#">CHECK OUR SHOPE</a>
    	</div>
    </section>

    <section id="projects">
    	<div class="container">
    		<h2>Our latest projects</h2>
    		<span></span>
    		<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
    	</div>
    	<div id="owl-demo" class="owl-carousel container-fluid">
   <a href="" class="item"><img src="images/port-pic1.jpg" alt="">
    <div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div>
   </a>
   <a href="" class="item"><img src="images/port-pic2.jpg" alt="">
    <div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div>
   </a>
   <a href="" class="item"><img src="images/port-pic3.jpg" alt="">
     <div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div>
   </a>
   <a href="" class="item"><img src="images/port-pic4.jpg" alt="">
     <div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div>
   </a>
   <a href="" class="item"><img src="images/port-pic5.jpg" alt="">
     <div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div>
   </a>
   <a href="" class="item"><img src="images/port-pic1.jpg" alt="">
     <div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div>
   </a>
   <a href="" class="item"><img src="images/port-pic2.jpg" alt="">
      <div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div>
   </a>
   <a href="" class="item"><img src="images/port-pic3.jpg" alt=""><div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div></a>
   <a href="" class="item"><img src="images/port-pic4.jpg" alt=""><div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div></a>
   <a href="" class="item"><img src="images/port-pic5.jpg" alt=""><div class="item-caption">
     <h4>BRANDING</h4>
     <h3>Metalbrand</h3>
     <span></span>
    </div></a>
    	</div>
    </section>

    <section id="check" class="color-white">
    	<div class="container">
    		<a href="#" class="color-orange">MORE ON BEHANCE</a>
    	</div>
    	<a href="#partner" class='scroll color-orange'>
            		<i class="fa fa-angle-down fa-2x" ></i>
            	</a>
    </section>

    <section id="partner">
    	<div class="container">
    		<h2>OUR PARTNERS</h2>
    		<span></span>
    		<div class="row">
    		   <ul>
    		   	<li class="col-md-3 col-xs-6">
    		   		<a href=""><img src="images/c-logo.png" alt=""></a>
    		   	</li>
    		   	<li class="col-md-3 col-xs-6">
    		   		<a href=""><img src="images/c-logo1.png" alt=""></a>
    		   	</li>
    		   	<li class="col-md-3 col-xs-6">
    		   		<a href=""><img src="images/c-logo2.png" alt=""></a>
    		   	</li>
    		    <li class="col-md-3 col-xs-6">
    		    	<a href=""><img src="images/c-logo3.png" alt=""></a>
    		    </li>
    		   </ul>
    		</div>
    	</div>
    </section>
   
   <section id="about">
    	<div class="container">
    		<h2>ABOUT US</h2>
    		<span></span>
    		<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
    		<div></div>
    		<ul class="person">
    			<li class="col-md-3">
    				<img src="images/about-pic1.png" alt="">
    				<h4>MIKE</h4>
    				<p>CEO/FOUNDER</p>
    				<span></span>
    				<div class="about-grid"><h3>WE ARE HIRING!</h3><span></span></div>
    			</li>
    			<li class="col-md-3">
    				<img src="images/about-pic2.png" alt="">
    				<h4>TAYLOR</h4>
    				<p>GRAPHIC DESIGNER</p>
    				<span></span>
    				<div class="about-grid"><h3>WE ARE HIRING!</h3><span></span></div>
    			</li>
    			<li class="col-md-3">
    				<img src="images/about-pic3.png" alt="">
    				<h4>JAMES</h4>
    				<p>COPEWITER</p>
    				<span></span>
    				<div class="about-grid"><h3>WE ARE HIRING!</h3><span></span></div>
    			</li>
    			<li class="col-md-3">
    				<img src="images/about-pic1.png" alt="">
    				<h4>MIKE</h4>
    				<p>CEO/FOUNDER</p>
    				<span></span>
    				<div class="about-grid"><h3>WE ARE HIRING!</h3><span></span></div>
    			</li>
    		</ul>
    	</div>
    	<a href="#latest" class='scroll color-orange'>
            		<i class="fa fa-angle-down fa-2x" ></i>
            	</a>
    </section>

     <section id="latest">
     	<div class="container">
     		<h2>LATEST TWEETS</h2>
     		<span></span>
     		<ul id="owl-latest" class="owl-carousel">
              <li class="item">
              	<p>Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
              	<a href="">CRAIG</a>
              </li>
              <li class="item">
              	<p>Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
              	<a href="">CRAIG</a>
              </li>
              <li class="item">
              	<p>Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
              	<a href="">CRAIG</a>
              </li>
            </ul>
     	</div>
     </section>

     <section id="contact">
     	<div class="container">
     		<h1>CONTACT US</h1>
     		<span></span>
     			<div class="row">
     				<div class="col-md-4">
     					<h3>ADDRESS</h3>
     					<ul>
     						<li>908 New Hampshire Ave NW
							<li>Washington, DC 20037
							<li>(202) 463-5141
							<li>Doris Cannon
						</ul>
     					<span></span>
     					<span></span>
     					<span></span>
     					<span></span>
     				</div>
     				<div class="col-md-8">
     					<form action="">
     					  <div class="text-boxs">	
     						<div class="text-box"><input type="text" placeholder="Name"></div>
     						<div class="text-box"><input type="text" placeholder="Email"></div>
     						<div class="text-box"><input type="text" placeholder="Telephone"></div>
     						<div class="text-box"><input type="text" placeholder="Subject"></div>
     						<div class="clearfix"></div>
     					  </div>
     					  <div class="subject-box">
     					  	<textarea placeholder="Message"></textarea>
     					  </div>	
     					  <input type="submit" value="SEND">
     					</form>
     				</div>
     			</div>
     	</div>
     </section>

     <div class="totop"><span></span></div>

    <script src="https://code.jquery.com/jquery.js"></script> 
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/owl-carousel.js"></script>
    <script src='js/demo1.min.js'></script>
    <script src='js/totop.js'></script>
   </body>
</html>